<template>
  <div class="page" v-if="info">
    <div>
      <h1>运动风险评估分析报告</h1>
      <p class="time">评估时间：{{ info.assessmentTime }}</p>
      <div class="flex">
        <!-- 个人信息 -->
        <div class="box userInfo">
          <h2><img src="@/assets/user-icon.png" width="25px" />个人信息</h2>
          <div class="flex">
            <div>姓名<p>{{ info.user.nickname }}</p></div>
            <div>性别<p>{{ info.user.sex ? '男' : '女' }}</p></div>
            <div>年龄<p>{{ info.user.age }}</p></div>
            <div>身高<p>{{ info.user.height }}</p></div>
            <div>体重<p>{{ info.user.weight }}</p></div>
            <div>腰围<p>{{ info.user.waistline }}</p></div>
            <div>BMI<p>{{ info.user.bmi }}</p></div>
            <div>安静心率<p>{{ info.user.rhr }}</p></div>
          </div>
        </div>
        <!-- 生命体征 -->
        <div class="box physical">
          <h2>第五大生命体征 · 心肺风险评估</h2>
          <div style="padding: 20px;">
            <div class="btn">GXT功率逐级递增负荷测试</div>
            <div class="flex">
              <div class="sBox">
                <span>VO2max</span>
                <p><b>{{ info.VO2max }}</b>ml/kg/min</p>
              </div>
              <div class="sBox">
                <span>METs</span>
                <p>
                  <b>{{ info.METs }}</b>
                  <label class="sBtn">低</label>
                </p>
              </div>
            </div>
            <p class="tip">您的心肺耐力水平与他人（同年龄性别）相比所在位置</p>
            <div class="color"><div/><div/><div/><div/><div/></div>
            <div class="colorText">
              <p>很差</p>
              <p>较差</p>
              <p>一般</p>
              <p>良好</p>
              <p>优秀</p>
            </div>
            <div class="colorBtn sBtn">{{ info.exceed }}</div>
          </div>
        </div>
        <!-- 心肺风险评估关键指标 -->
        <div class="box target">
          <h2 class="border"><img src="@/assets/heart-icon.png" width="25px" />心肺风险评估关键指标</h2>
          <div style="padding: 0 20px;">
            <div class="border">
              <span>运动负荷心电图</span>
              <label class="sBtn">{{ info.ecg.electrocardiogram }}</label>
            </div>
            <div class="border">
              <span>运动后血压恢复</span>
              <label class="sBtn">{{ info.ecg.bloodPressure }}</label>
            </div>
            <div class="border">
              <span>运动后心率恢复</span>
              <label class="sBtn">{{ info.ecg.heartRate }}</label>
            </div>
            <div>
              <span>运动中症状风险</span>
              <label class="sBtn">{{ info.ecg.symptom }}</label>
            </div>
          </div>
        </div>
        <!-- 评估关键指标解读 -->
        <div class="box decode">
          <h2 class="border"><img src="@/assets/tip-icon.png" width="25px" />评估关键指标解读</h2>
          <div style="padding: 20px;" class="flex">
            <div class="sBox" style="background: #eff6ff; width: 100%;">
              <span>运动负荷心电图 (ECG)</span>
              <p>指运动过程中的心电图，由于运动过程中心率增加，这与安静情况下的心电图有所不同。运动心电图反映的是心脏在负荷状态下的电活动情况，对冠心病的诊断具有较大的价值，同时也能评估心脏的储备功能。</p>
            </div>
            <div class="sBox">
              <span>运动负荷心电图 (ECG)</span>
              <p>运动后血压应在运动后5-6分钟，一般情况下血压基本能恢复到正常。运动后血压恢复不良与恶性心律失常、心血管疾病及 mortality 的风险增加相关。</p>
            </div>
            <div class="sBox">
              <span>运动后心率恢复</span>
              <p>运动后心率恢复一般指运动中心断后，1-5分钟后心率能恢复到正常水平。运动后心率恢复与心血管健康、血脂异常及心脏收缩功能密切相关。</p>
            </div>
            <div class="sBox" style="width: 100%;">
              <span>运动中症状风险</span>
              <p>运动测试中出现胸痛、心悸、头晕或其他不适症状（如室息感、可能由缺血引起的胸闷、烧灼感、下颌或手臂疼痛）应终止测试。尤其需警惕类似心绞痛的感觉。轻度活动时呼吸困难、运动过程中头晕或晕厥。</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 运动测试指标 -->
      <div class="box chart">
        <h2 class="border"><img src="@/assets/chart-icon.png" width="25px" />运动测试指标</h2>
        <div style="padding: 0 20px;">
          <div class="flex">
            <!-- 运动前 -->
            <div>
              <h3><i />运动前（安静阶段）</h3>
              <div class="flex">
                <div class="sBox">
                  <span>安静心率</span>
                  <p>{{ info.quietStage.heartRate }} bpm</p>
                  <label>正常 (60-100)</label>
                </div>
                <div class="sBox">
                  <span>运动前血压</span>
                  <p>{{ info.quietStage.bloodPressure }} bpm</p>
                  <label>正常高值</label>
                </div>
                <div class="sBox">
                  <span>心电图ECG</span>
                  <p>{{ info.quietStage.ecg }}</p>
                </div>
                <div class="sBox">
                  <span>血氧</span>
                  <p>{{ info.quietStage.oxygen }} %</p>
                  <label>正常</label>
                </div>
              </div>
            </div>
            <!-- 运动中 -->
            <div>
              <h3><i />运动中（运动阶段）</h3>
              <div class="flex">
                <div class="sBox">
                  <span>运动时长</span>
                  <p>{{ info.sportsStage.duration }}分钟</p>
                </div>
                <div class="sBox">
                  <span>最大心率</span>
                  <p>{{ info.sportsStage.maxPower }}bpm</p>
                </div>
                <div class="sBox">
                  <span>测试最大心率占比</span>
                  <p>{{ info.sportsStage.heartRatePercent }}%</p>
                </div>
                <div class="sBox">
                  <span>最大功率</span>
                  <p>{{ info.sportsStage.maxPower }}W</p>
                </div>
                <div class="sBox">
                  <span>终止原因</span>
                  <p>{{ info.sportsStage.terminationReason }}</p>
                </div>
                <div class="sBox">
                  <span>RPE自感用力度</span>
                  <p>{{ info.sportsStage.rpe }}</p>
                </div>
              </div>
            </div>
          </div>
          <h3>运动数据图表</h3>
          <div ref="chartRef" style="height: 500px;" />
          <h3>阶段数据记录</h3>
          <el-table
            :data="info.testData"
            :header-cell-style="{backgroundColor: '#f9fafb', color: '#000'}"
          >
            <el-table-column prop="stage" align="center" label="阶段">
              <template #default="scope">
                第{{ stagelist[scope.row.stage - 1] }}阶段
              </template>
            </el-table-column>
            <el-table-column prop="heartRateRange" align="center" label="阶段心率范围	" />
            <el-table-column prop="power" align="center" label="阶段功率值" />
            <el-table-column prop="oxygenUptake" align="center" label="阶段摄氧量" />
            <el-table-column prop="bloodPressure" align="center" label="阶段血压" />
         </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import { ElTable, ElTableColumn } from 'element-plus'
import { getReport } from '@/api';
export default {
  components: { ElTable, ElTableColumn },
  name: "HeartRateReport",
  data() {
    return {
      stagelist: ['一', '二', '三', '四'],
      info: null
    }
  },
  mounted() {
    const testSign = this.$route.query.sign
    getReport({ testSign }).then(res => {
      this.info = res
      this.$nextTick(() => this.charLineHeartRate())
    })
  },
  methods: {
    // 课堂强度折线图绘制
    charLineHeartRate() {
      const {heartRates, powers, oxygenUptakes} = this.info.chartData
      const myChart = echarts.init(this.$refs.chartRef)
      const option = {
        grid: { 
          containLabel: true,
          left: 20,
          right: 30,
          top: 60,
          bottom: 0,
          heigth: '100%'
        },
        tooltip: { trigger: 'axis' },
        legend: {
          top: 0,
          data: [
            {name: '心率(bpm)', itemStyle: {color: '#e6eefa', borderColor: '#3b82f6', borderWidth: 2}}, 
            {name: '功率(w)', itemStyle: {color: '#e2f4ee', borderColor: '#10b981', borderWidth: 2}},
            {name: '摄氧量', itemStyle: {color: '#f9f1e2', borderColor: '#f59e0b', borderWidth: 2}},
          ],
          textStyle: { fontSize: 15 },
          icon: 'rect',
          itemGap: 20,
          itemWidth: 30,
          itemHeight: 8
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          data: ['第一阶段', '第二阶段', '第三阶段', '第四阶段'],
          boundaryGap: false,
          axisLine: {show: false},
          axisLabel: {
            fontSize: 15,
            margin: 20
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            fontSize: 15,
            margin: 20
          },
        },
        series: [
          {
            type: 'line',
            stack: 'Total',
            name: '心率(bpm)',
            lineStyle: {
              color: '#3b82f6'
            },
            areaStyle: {
              color: '#e6eefa'
            },
            data: heartRates
          },
          {
            type: 'line',
            stack: 'Total',
            name: '功率(w)',
            lineStyle: {
              color: '#10b981'
            },
            areaStyle: {
              color: '#e2f4ee'
            },
            data: powers
          },
          {
            type: 'line',
            stack: 'Total',
            name: '摄氧量',
            lineStyle: {
              color: '#f59e0b'
            },
            areaStyle: {
              color: '#f9f1e2'
            },
            data: oxygenUptakes
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
};
</script>

<style scoped lang="scss">
.chart {
  margin-top: 20px;
  padding-bottom: 40px;
  h2 {
    background: #3b82f61a;
    color: #3b82f6;
    border-radius: 10px 10px 0 0;
  }
  .sBox {
    
    p {
      font-size: 16px;
      color: #1f2937;
    }
    label {
      font-size: 12px;
      color: #16a34a; // #ca8a04
    }
  }
  h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: #1f2937;
    margin: 20px 0;
    i {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 100px;
      border: 2px solid #3b82f6;
    }
  }
}
.decode {
  p {
    margin-top: 10px;
    color: #4b5563;
  }
  span {
    font-size: 16px;
    color: #1f2937;
  }
}
.target > div > div {
  font-size: 16px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  color: #1f2937;
}
.target, .userInfo {
  width: 360px;
}
.decode, .physical {
  width: 700px;
}
.userInfo {
  height: 400px;
  .flex {
    padding: 0 20px;
  }
  p {
    color: #1f2937;
    font-size: 16px;
  }
}
.physical {
  h2 {
    background: #3b82f6;
    color: #fff;
    border-radius: 10px 10px 0 0;
  }
  .btn {
    color: #3b82f6;
    background: #3b82f61a;
    padding: 8px 16px;
    border-radius: 30px;
    width: fit-content;
    margin-bottom: 20px;
  }
  .sBox {
    width: calc(50% - 10px);
    text-align: center;
    p {
      margin-top: 8px;
    }
    b {
      font-size: 30px;
      color: #1f2937;
      padding-right: 8px;
    }
  }
  .tip {
    font-size: 14px;
    margin: 24px 0 12px 0;
  }
  .colorText {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
  .color {
    display: flex;
    div {
      width: 25%;
      height: 12px;
      &:first-child {
        background: #ef4444;
        border-radius: 20px 0 0 20px;
      }
      &:nth-child(2) {
        background: #f97316;
      }
      &:nth-child(3) {
        background: #eab308;
      }
      &:nth-child(4) {
        background: #22c55e;
      }
      &:nth-child(5) {
        background: #3b82f6;
        border-radius: 0 20px 20px 0;
      }
    }
  }
  .colorBtn {
    color: #fff;
    background: #3b82f6;
    margin-left: auto;
  }
}
.sBtn {
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 100px;
  width: fit-content;
}
label.sBtn {
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
}
.page {
  background: #f9fafb;
  min-height: 100%;
  color: #6b7280;
  font-size: 14px;
  > div {
    width: 1120px;
    margin: auto;
    padding: 32px 16px;
  }
}
h1, .time {
  text-align: center;
}
h1 {
  font-size: 30px;
  color: #1f2937;
}
.border {
  border-bottom: 1px solid #f3f4f6;
}
.time {
  color: #6b7280;
  margin: 8px 0 32px 0;
}
.flex {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.box {
  border-radius: 10px;
  background: #fff;
  box-shadow:  0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  .flex > div {
    width: calc(50% - 10px);
  }
}
.sBox {
  padding: 16px;
  border-radius: 10px;
  background: #f9fafb;
}
h2 {
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1f2937;
  padding: 20px;
}
</style>
